<template>
  <div class="upload-page-container">
    <!-- 页面头部 -->
    <div class="upload-header">
      <div class="header-content">
        <h1 class="upload-title">
          <i class="el-icon-upload"></i>
          文件上传中心
        </h1>
        <p class="upload-subtitle">支持PDF文档上传，智能分析处理</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="upload-main">
      <div class="upload-content">
        <!-- 拖拽上传区域 -->
        <div class="upload-area">
          <el-upload
            class="upload-dragger"
            drag
            multiple
            action="#"
            :http-request="customRequest"
            :show-file-list="false"
            :on-progress="handleProgress"
            :on-success="handleSuccess"
            :on-error="handleError"
            :before-upload="beforeUpload"
          >
            <div class="upload-zone">
              <div class="upload-icon-wrapper">
                <i class="el-icon-upload custom-upload-icon"></i>
                <div class="upload-ripple"></div>
              </div>
              <h3 class="upload-text">点击或拖拽文件到此处上传</h3>
              <p class="upload-description">支持PDF格式，单个文件最大50MB</p>
              <div class="upload-features">
                <div style="display: flex; justify-content: center; align-items: center">
                  <div class="feature-item">
                    <i class="el-icon-document"></i>
                    <span>PDF文档</span>
                  </div>
                  <div class="feature-item">
                    <i class="el-icon-upload"></i>
                    <span>批量上传</span>
                  </div>
                  <div class="feature-item">
                    <i class="el-icon-refresh"></i>
                    <span>智能处理</span>
                  </div>
                </div>
              </div>
            </div>
          </el-upload>
        </div>

        <!-- 上传进度面板 -->
        <div class="upload-panel" v-if="uploadList.length > 0" ref="uploadPanel">
          <div class="panel-header">
            <h3>
              <i class="el-icon-document"></i>
              上传进度
              <span class="upload-count">({{ uploadList.length }})</span>
            </h3>
            <el-button 
              type="text" 
              @click="clearCompleted"
              :disabled="!hasCompletedFiles"
            >
              <i class="el-icon-delete"></i>
              清理已完成
            </el-button>
          </div>
          
          <div class="upload-list">
          <div
            v-for="file in uploadList"
            :key="file.uid"
              class="upload-item"
              :class="{ 
                'upload-success': file.status === 'success',
                'upload-error': file.status === 'fail',
                'upload-active': file.status === 'active'
              }"
          >
              <div class="file-info">
                <div class="file-icon">
                  <i class="el-icon-document"></i>
                </div>
                <div class="file-details">
                  <div class="file-name">{{ file.name }}</div>
                  <div class="file-status">
                    <span v-if="file.status === 'active'" class="status-active">
                      <i class="el-icon-loading"></i>
                      上传中...
                    </span>
                    <span v-else-if="file.status === 'success'" class="status-success">
                      <i class="el-icon-success"></i>
                      上传成功
                    </span>
                    <span v-else-if="file.status === 'fail'" class="status-error">
                      <i class="el-icon-error"></i>
                      上传失败
                    </span>
                  </div>
                  <div class="parsing-status" v-if="file.status === 'success'">
                    <span v-if="file.parsingStatus === 'pending'" class="status-pending">
                      <i class="el-icon-time"></i>
                      等待解析
                    </span>
                    <span v-else-if="file.parsingStatus === 'parsing'" class="status-parsing">
                      <i class="el-icon-loading"></i>
                      正在解析PDF...
                    </span>
                    <span v-else-if="file.parsingStatus === 'extracting'" class="status-extracting">
                      <i class="el-icon-loading"></i>
                      正在提取内容...
                    </span>
                    <span v-else-if="file.parsingStatus === 'processing'" class="status-processing">
                      <i class="el-icon-loading"></i>
                      正在处理数据...
                    </span>
                    <span v-else-if="file.parsingStatus === 'completed'" class="status-completed">
                      <i class="el-icon-success"></i>
                      解析完成
                    </span>
                    <span v-else-if="file.parsingStatus === 'failed'" class="status-failed">
                      <i class="el-icon-error"></i>
                      解析失败
                    </span>
                  </div>
                </div>
                <div class="file-actions">
                  <el-button 
                    v-if="file.status === 'fail'"
                    type="text" 
                    size="mini"
                    @click="retryUpload(file)"
                  >
                    <i class="el-icon-refresh"></i>
                    重试
                  </el-button>
                  <el-button 
                    type="text" 
                    size="mini"
                    @click="removeFile(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </el-button>
                </div>
              </div>
              
              <div class="progress-wrapper" v-if="file.status === 'active'">
            <el-progress
              :percentage="Math.floor(file.progress)"
                  :stroke-width="4"
                  :show-text="false"
                  :color="progressColor"
                />
                <div class="progress-text">{{ Math.floor(file.progress) }}%</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 使用说明 -->
        <div class="upload-guide">
          <h3>
            <i class="el-icon-info"></i>
            使用说明
          </h3>
          <div class="guide-content">
            <div class="guide-item">
              <div class="guide-icon">
                <i class="el-icon-document"></i>
              </div>
              <div class="guide-text">
                <h4>支持格式</h4>
                <p>目前支持PDF格式文档上传</p>
              </div>
            </div>
            <div class="guide-item">
              <div class="guide-icon">
                <i class="el-icon-upload"></i>
              </div>
              <div class="guide-text">
                <h4>文件大小</h4>
                <p>单个文件不超过50MB，最多600页</p>
              </div>
            </div>
            <div class="guide-item">
              <div class="guide-icon">
                <i class="el-icon-refresh"></i>
              </div>
              <div class="guide-text">
                <h4>批量上传</h4>
                <p>支持同时上传多个文件，最多20个</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 回到顶部按钮 -->
    <el-backtop 
      :right="40" 
      :bottom="40"
      target=".upload-page-container"
    />
  </div>
</template>

<script>
import { getCurrentUserId } from '@/utils/auth.js';

export default {
  name: 'UploadPage',
  data() {
    return {
      uploadList: [],       // 存放 { uid, name, progress, status, parsingStatus } 
    };
  },
  computed: {
    hasCompletedFiles() {
      return this.uploadList.some(file => 
        file.status === 'fail' || 
        (file.status === 'success' && file.parsingStatus === 'completed')
      );
    },
    progressColor() {
      return [
        { color: '#409eff', percentage: 20 },
        { color: '#67c23a', percentage: 40 },
        { color: '#e6a23c', percentage: 60 },
        { color: '#f56c6c', percentage: 80 },
        { color: '#67c23a', percentage: 100 }
      ];
    }
  },
  methods: {
    beforeUpload(file) {
      // 检查文件类型
      const isPDF = file.type === 'application/pdf';
      if (!isPDF) {
        this.$message.error('只能上传PDF格式的文件！');
        return false;
      }
      
      // 检查文件大小 (50MB)
      const isLt50M = file.size / 1024 / 1024 < 50;
      if (!isLt50M) {
        this.$message.error('文件大小不能超过50MB！');
        return false;
      }
      
      return true;
    },

    customRequest({ file, onProgress, onSuccess, onError }) {
      const uid = file.uid;

      // 添加上传任务记录
      this.uploadList.push({
        uid,
        name: file.name,
        progress: 0,
        status: 'active',
        parsingStatus: 'pending'
      });

      // 立即滚动到上传列表，让用户看到上传进度
      this.scrollToUploadList();

      // 构建 formData 对象
      const formData = new FormData();
      formData.append("file", file);

      // 设置用户ID
      const userId = getCurrentUserId() || 1;
      formData.append("uid", userId);

      // 发送请求
      this.$request.post('/file/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
          const percent = (progressEvent.loaded / progressEvent.total) * 100;
          const item = this.uploadList.find(i => i.uid === uid);
          if (item) {
            item.progress = percent;
            onProgress({ percent }, file);
          }
        }
      }).then(res => {
        const item = this.uploadList.find(i => i.uid === uid);
        if (item) {
          item.status = 'success';
          item.progress = 100;
          item.parsingStatus = 'parsing';
          onSuccess(res, file);
          this.$message.success(`${file.name} 上传成功，正在解析...`);
          
          // 滚动到上传列表
          this.scrollToUploadList();
          
          // 模拟解析进度更新
          this.simulateParsingProgress(item);
        }
      }).catch(err => {
        const item = this.uploadList.find(i => i.uid === uid);
        if (item) {
          item.status = 'fail';
          item.parsingStatus = 'failed';
          console.error("上传失败错误详情：", err);
          this.$message.error(`${file.name} 上传失败`);
          onError(err, file);
        }
      });
    },

    // 模拟解析进度更新
    simulateParsingProgress(item) {
      const parsingSteps = [
        { status: 'parsing', message: '正在解析PDF...' },
        { status: 'extracting', message: '正在提取内容...' },
        { status: 'processing', message: '正在处理数据...' },
        { status: 'completed', message: '解析完成' }
      ];
      
      let stepIndex = 0;
      const updateStep = () => {
        if (stepIndex < parsingSteps.length) {
          const step = parsingSteps[stepIndex];
          item.parsingStatus = step.status;
          stepIndex++;
          
          if (stepIndex < parsingSteps.length) {
            setTimeout(updateStep, 2000); // 每2秒更新一次状态
          }
        }
      };
      
      setTimeout(updateStep, 1000); // 1秒后开始显示解析状态
    },

    handleProgress(evt, file) {
      const idx = this.uploadList.findIndex(f => f.uid === file.uid);
      if (idx >= 0) this.uploadList[idx].progress = evt.percent;
    },

    handleSuccess(res, file) {
      const idx = this.uploadList.findIndex(f => f.uid === file.uid);
      if (idx >= 0) this.uploadList[idx].progress = 100;
    },

    handleError(err, file) {
      const idx = this.uploadList.findIndex(f => f.uid === file.uid);
      if (idx >= 0) this.uploadList[idx].status = 'fail';
    },

    removeFile(file) {
      const index = this.uploadList.findIndex(f => f.uid === file.uid);
      if (index > -1) {
        this.uploadList.splice(index, 1);
        this.$message.success('已移除文件');
      }
    },

    retryUpload(file) {
      // 重置文件状态
      file.status = 'active';
      file.progress = 0;
      file.parsingStatus = 'pending';
      
      // 重新创建文件对象并上传
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.accept = '.pdf';
      fileInput.onchange = (e) => {
        if (e.target.files.length > 0) {
          const newFile = e.target.files[0];
          this.customRequest({
            file: newFile,
            onProgress: this.handleProgress,
            onSuccess: this.handleSuccess,
            onError: this.handleError
          });
        }
      };
      fileInput.click();
    },

    clearCompleted() {
      this.uploadList = this.uploadList.filter(file => 
        file.status === 'active' || 
        (file.status === 'success' && file.parsingStatus !== 'completed')
      );
      this.$message.success('已清理完成的文件');
      
      // 如果还有文件在上传或解析中，滚动到上传列表
      if (this.uploadList.length > 0) {
        this.scrollToUploadList();
      }
    },

    scrollToUploadList() {
      // 使用 nextTick 确保 DOM 已更新
      this.$nextTick(() => {
        if (this.$refs.uploadPanel) {
          // 平滑滚动到上传列表
          this.$refs.uploadPanel.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
          
          // 添加上传面板的高亮效果
          this.$refs.uploadPanel.classList.add('highlight-panel');
          
          // 2秒后移除高亮效果
          setTimeout(() => {
            if (this.$refs.uploadPanel) {
              this.$refs.uploadPanel.classList.remove('highlight-panel');
            }
          }, 2000);
        }
      });
    }
  }
};
</script>

<style scoped>
.upload-page-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-bottom: 40px;
  overflow-x: hidden; /* 防止水平滚动 */
}

/* 页面头部 */
.upload-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 60px 0;
  text-align: center;
  margin-bottom: 40px;
}

.header-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.upload-title {
  font-size: 2.5rem;
  margin: 0 0 20px 0;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.upload-title i {
  font-size: 2.8rem;
  color: #ffd700;
}

.upload-subtitle {
  font-size: 1.2rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
}

/* 主要内容区域 */
.upload-main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 150px;
  display: flex;
  justify-content: center;
}

.upload-content {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 1400px;
}

/* 拖拽上传区域 */
.upload-area {
  background: white;
  border-radius: 20px;
  padding: 40px 20px 0 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: visible !important;
  width: 100%;
  display: flex;
  justify-content: center;
}

.upload-area:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.upload-dragger {
  width: 100% !important;
  max-width: 1000px !important;
  border: none !important;
  height: auto !important;
  min-height: 400px !important;
  overflow: visible !important;
  display: flex !important;
  justify-content: center !important;
}

.upload-dragger .el-upload-dragger {
  width: 100% !important;
  height: auto !important;
  min-height: 400px !important;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  display: block !important;
}

.upload-zone {
  padding: 50px 10px 0px 10px;
  text-align: center;
  border: 3px dashed #e1e8ed;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 350px;
  width: 100%;
  box-sizing: border-box !important;
  max-width: 100%;
}

.upload-zone:hover {
  border-color: #667eea;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
  transform: scale(1.02);
}

.upload-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  width: 120px;
  height: 120px;
}

.custom-upload-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem !important;
  color: #667eea;
  transition: all 0.3s ease;
  z-index: 2;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.upload-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border: 2px solid #667eea;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 2s infinite;
  opacity: 0.3;
  z-index: 1;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.1;
}
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
  }
}

.upload-text {
  font-size: 1.5rem;
  color: #2c3e50;
  margin: 0 0 10px 0;
  font-weight: 600;
  line-height: 1.2;
}

.upload-description {
  font-size: 1rem;
  color: #666;
  margin: 0 0 30px 0;
  line-height: 1.4;
}

.upload-features {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 500px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 20px;
  color: #667eea;
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
}

.feature-item i {
  font-size: 1.1rem;
}

/* 上传进度面板 */
.upload-panel {
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: visible;
  transition: all 0.3s ease;
}

.upload-panel.highlight-panel {
  box-shadow: 0 15px 50px rgba(102, 126, 234, 0.3);
  transform: scale(1.02);
  border: 2px solid #667eea;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.panel-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-header h3 i {
  color: #667eea;
}

.upload-count {
  color: #667eea;
  font-size: 1rem;
  font-weight: 400;
}

.upload-list {
  max-height: 400px;
  overflow-y: auto;
}

.upload-item {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

.upload-item:hover {
  transform: translateX(5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.upload-item.upload-success {
  border-color: #67c23a;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.upload-item.upload-error {
  border-color: #f56c6c;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.upload-item.upload-active {
  border-color: #409eff;
  background: linear-gradient(135deg, #f0f8ff 0%, #e1f5fe 100%);
}

.file-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.file-icon {
  width: 40px;
  height: 40px;
  background: #667eea;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

.file-details {
  flex: 1;
}

.file-name {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
  word-break: break-all;
}

.file-status {
  font-size: 0.9rem;
}

.status-active {
  color: #409eff;
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-success {
  color: #67c23a;
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-error {
  color: #f56c6c;
  display: flex;
  align-items: center;
  gap: 5px;
}

.parsing-status {
  margin-top: 5px;
  font-size: 0.85rem;
}

.status-pending {
  color: #909399;
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-parsing {
  color: #409eff;
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-extracting {
  color: #67c23a;
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-processing {
  color: #e6a23c;
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-completed {
  color: #67c23a;
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-failed {
  color: #f56c6c;
  display: flex;
  align-items: center;
  gap: 5px;
}

.file-actions {
  display: flex;
  gap: 10px;
}

.progress-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
}

.progress-text {
  font-weight: 600;
  color: #667eea;
  min-width: 40px;
}

/* 使用说明 */
.upload-guide {
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: visible;
}

.upload-guide h3 {
  margin: 0 0 25px 0;
  color: #2c3e50;
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.upload-guide h3 i {
  color: #667eea;
}

.guide-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.guide-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

.guide-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.guide-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.guide-text h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 1rem;
  font-weight: 600;
}

.guide-text p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .upload-main {
    max-width: 1400px;
    padding: 0 30px;
  }
  
  .upload-content {
    max-width: 1200px;
  }
  
  .upload-dragger {
    max-width: 900px !important;
  }
  
  .upload-zone {
    padding: 50px 60px;
  }
}

@media (max-width: 1200px) {
  .upload-main {
    max-width: 1200px;
    padding: 0 30px;
  }
  
  .upload-content {
    max-width: 1000px;
  }
  
  .upload-dragger {
    max-width: 800px !important;
  }
  
  .upload-zone {
    padding: 50px 50px;
  }
  
  .upload-icon-wrapper {
    width: 100px;
    height: 100px;
  }
  
  .custom-upload-icon {
    font-size: 4rem !important;
  }
  
  .upload-icon {
    font-size: 4rem !important;
  }
  
  .upload-ripple {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 768px) {
  .upload-main {
    padding: 0 20px;
  }
  
  .upload-content {
    max-width: 100%;
  }
  
  .upload-area {
    padding: 40px;
  }
  
  .upload-title {
    font-size: 2rem;
    flex-direction: column;
    gap: 10px;
  }
  
  .upload-title i {
    font-size: 2.2rem;
  }
  
  .upload-dragger {
    min-height: 400px;
    max-width: 100% !important;
  }
  
  .upload-dragger .el-upload-dragger {
    min-height: 400px;
  }
  
  .upload-zone {
    padding: 40px 30px;
    min-height: 350px;
  }
  
  .upload-features {
    flex-direction: column;
    align-items: center;
    gap: 15px;

  }
  
  .feature-item {
    width: 100%;
    justify-content: center;
  }
  
  .guide-content {
    grid-template-columns: 1fr;
  }
  
  .file-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .file-actions {
    align-self: flex-end;
  }
  
  .upload-icon-wrapper {
    width: 80px;
    height: 80px;
  }
  
  .custom-upload-icon {
    font-size: 3.5rem !important;
  }
  
  .upload-icon {
    font-size: 3.5rem !important;
  }
  
  .upload-ripple {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 480px) {
  .upload-main {
    padding: 0 15px;
  }
  
  .upload-area, .upload-panel, .upload-guide {
    padding: 20px;
  }
  
  .upload-dragger {
    min-height: 350px;
  }
  
  .upload-dragger .el-upload-dragger {
    min-height: 350px;
  }
  
  .upload-zone {
    padding: 30px 20px;
    min-height: 300px;
  }
  
  .upload-text {
    font-size: 1.2rem;
  }
  
  .upload-description {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  
  .upload-features {
    gap: 10px;
    max-width: 250px;
  }
  
  .feature-item {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  .feature-item i {
    font-size: 1rem;
  }
  
  .upload-icon-wrapper {
    width: 60px;
    height: 60px;
  }
  
  .custom-upload-icon {
    font-size: 3rem !important;
  }
  
  .upload-icon {
    font-size: 3rem !important;
  }
  
  .upload-ripple {
    width: 60px;
    height: 60px;
  }
}

/* 覆盖 Element UI 默认样式，确保内容显示 */
:deep(.el-upload-dragger) {
  overflow: visible !important;
  height: auto !important;
  min-height: 400px !important;
  min-width: 750px !important;
  margin: 5px 0 5px 0;
  border: none;
}

:deep(.el-upload) {
  overflow: visible !important;
}

:deep(.el-upload-dragger .el-upload__text) {
  display: none !important;
}

/* 确保上传图标显示 - 使用更强的选择器 */
:deep(.el-upload-dragger .el-icon-upload) {
  display: none !important;
}

/* 强制显示自定义上传图标 */
.upload-icon-wrapper .custom-upload-icon,
:deep(.upload-icon-wrapper .custom-upload-icon),
:deep(.custom-upload-icon) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 15% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 4rem !important;
  color: #667eea !important;
  z-index: 2 !important;
}

.upload-icon-wrapper .upload-icon,
:deep(.upload-icon-wrapper .upload-icon),
:deep(.upload-icon) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 5rem !important;
  color: #667eea !important;
  z-index: 2 !important;
}

/* 确保所有上传相关元素都能显示 */
.upload-text,
.upload-description,
.upload-features,
.feature-item {
  margin: 10px 20px 10px 20px;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
</style>
